<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<link rel="stylesheet" type="text/css" href="../css/register.css" />		
		<script src="../js/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="../js/yanzhengma.js" ></script>
	</head>
	<body>
		<div id="bar">
			<a href="../index.html">
				<img src="../img/shop_182x60.png"/>
				<span>中关村在线旗下网上商城</span>
			</a>
			<p><a href="login.html">立即登录</a>已有ZOL商城账号？</p>
		</div>
		<div id="wrap">
			<div class="title">30秒快速注册，加入ZOL商城</div>
			<div class="form">
				<ul class="phone">
					<li><span>用手机号注册</span></li>
				</ul>
				<div class="text">
					<div class="num">
						<div class="lable"><em>*</em>手机号：</div>
						<input type="text" class="input phone_num" maxlength="11"/>
						<i class="right_tip"></i>
						<i class="wrong_tip">请填写手机号码</i>
						<div class="tips">请填写手机号码</div>
					</div>
					<div class="num">
						<div class="lable"><em>*</em>验证码：</div>
						<input type="text" class="input yanzheng tu" />
						<div class="yzm"></div>
						<a href="javascript:;" class="change">换一张</a>
						<i class="wrong_tip" >请填写验证码</i>
						<div class="tips">请填写图片验证码</div>
						<i class="right_tip" style="position:absolute;left:415px;"></i>
					</div>
					<div class="num">
						<div class="lable"><em>*</em>验证码：</div>
						<input type="text" class="input yanzheng duanxin" />
						<input class="getyzm" type="button" value="获取短息验证码"></input>
						<i class="right_tip"></i>
						<i class="wrong_tip">请填写手机验证码</i>
						<div class="tips">请填写手机号码，然后点击[获取验证码]</div>
					</div>
					<div class="num">
						<div class="lable"><em>*</em>密码：</div>
						<input type="password" class="input pwd" />
						<i class="right_tip"></i>
						<i class="wrong_tip">请填写密码</i>
						<div class="tips">6-16位字母和数字的组合，不可用特殊字符</div>
					</div>
					<div class="num">
						<div class="lable"><em>*</em>确认密码：</div>
						<input type="password" class="input repwd" />
						<i class="right_tip"></i>
						<i class="wrong_tip">两次密码输入不一致</i>
						<div class="tips">再次输入密码</div>
					</div>
					<label class="agreement">
						<input type="checkbox" />同意
						<a href="http://help.zol.com/index.php?c=Detail&id=1019">《商城用户协议》</a>
						<a href="http://help.zol.com/index.php?c=Detail&id=1022">《隐私权说明》
</a>
					</label>
					<input type="button" class="btn" value="注册"/>					
				</div>
				
			</div>
			<div class="fast_login">
				<p>如果您已经注册，请<a href="login.html">直接登录</a>或者用以下方式登录：</p>
				<div class="list">
					<a class="sina" target="_blank" href="#"></a>
					<a class="qq" target="_blank" href="#"></a>
					<a class="alipay" target="_blank" href="#"></a>
					<a class="baidu" target="_blank" href="#"></a>
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="innerfooter">
				<div class="about">
					<a href="#">关于ZOL商城</a>|
					<a href="#">联系我们</a>|
					<a href="#">帮助中心</a>|
				</div>
				<div class="copyright">
					<a href="#">©2016. 中关村在线 版权所有</a>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			$(function(){
				$('.yzm').html(yanzheng());
				$('.change').click(function(){
					$('.yzm').html(yanzheng());
				});
				//获取短息验证码点击事件
				/*$('.getyzm').click(function(){
					$('.getyzm').css({'background':'#e6e6e6','color':'#999'});					
					var timer =null;
					var a = 100;				
					timer = setInterval(cut,1000);
					function cut(){					
						a--;
						//console.log(a)
						$('.getyzm').val(a + '秒后重新获取')
						if(a <=0){
							clearInterval(timer);
						}
					}
				})*/
				
				
				//正则判断			
				
				var reg = /^1{1}\d{10}$/
				//var reg_yzm = /^[a-zA-Z1-9]{4}$/
				//手机号
				$('.phone_num').blur(function(){
					var str = $(this).val();
					if(reg.test(str)){
						$(this).next().css('display','block');
					}else if(str == ''){
						$(this).next().next().css('display','block');
					}else{
						$(this).next().next().css('display','block');
						$(this).next().next().html('请填写有效的11位手机号码');
						
					}
				})
				//图片验证码
				$('.tu').blur(function(){
					var str = $(this).val();
					if(str != ''){
						$(this).parent().find('.right_tip').css('display','block');
						$(this).parent().find('.wrong_tip').css({
							'display':'none',
							'left':415
						});
					}else{
						$(this).parent().find('.wrong_tip').css({
							'display':'block',
							'left':415
						});
						$(this).parent().find('.right_tip').css('display','none');
					}
				})
				//短息验证码				
				$('.getyzm').click(function(){
					var a = ($('.yzm').html()).toUpperCase();
					var b = ($('.tu').val()).toUpperCase();
					if(a == b){
						$('.getyzm').css({
							'background':'#e6e6e6',
							'color':'#999'
							});
						var timer =null;
						var a = 100;				
						timer = setInterval(cut,1000);
						function cut(){					
							a--;
							//console.log(a)
							$('.getyzm').val(a + '秒后重新获取')
							if(a <=0){
								clearInterval(timer);
							}
						}						
					}else{
						$('.phone_num').next().next().css('display','block');
						$('.phone_num').next().next().html('图片验证码错误，请重新填写')
					}
				})
				//密码正则判断
				var reg_pwd = /^[a-zA-Z1-9]{6,16}$/;
				var reg_pwd_num = /^[1-9]{6,16}$/;
				$('.pwd').blur(function(){
					var str = $('.pwd').val();
					if(reg_pwd_num.test(str)){
						$(this).next().next().css('display','block');
						$(this).next().next().html('密码不能全是数字');
						$(this).next().css('display','none');
					}else if(str == ''){
						$(this).next().next().css('display','block');
						$(this).next().css('display','none');
					}else if(reg_pwd.test(str)){
						$(this).next().css('display','block');
						$(this).next().next().css('display','none'); 
					}else{
						$(this).next().next().css('display','block');
						$(this).next().next().html('6-16位字母和数字的组合，不可用特殊字符')
						$(this).next().css('display','none');
					}
				})
				//确认密码
				$('.repwd').blur(function(){
					var a = $(this).val();
					var b = $('.pwd').val();
//					console.log(a == b)
					if(a == b){
						$(this).next().css('display','block');
						$(this).next().next().css('display','none')
					}else{
						$(this).next().css('display','none');
						$(this).next().next().css('display','block')
					}
					
				})
				//注册按钮
				$('.btn').click(function(){
					var name = $('.phone_num').val();
					var pwd = $('.pwd').val();
					$.ajax({						
						url:"http://datainfo.duapp.com/shopdata/userinfo.php",
						data:{
							status:"register",
							userID:name,
							password:pwd
						},
						success:function(data){
							if(data == 0){
								alert('此手机号已经注册过')
							}else if(data == 1){
								alert('注册成功！')
								window.location.href = 'login.html'
							}else if(data == 2){
								alert('数据库报错')
							}
							
						}
						
					});
				})
			})
		</script>
		
	</body>
</html>
